搭建mix space博客 前端+后端

2025 年 2 月 11 日 星期二(已编辑)
3
这篇文章上次修改于 2025 年 2 月 11 日 星期二，可能部分内容已经不适用，如有疑问可询问作者。

搭建mix space博客 前端+后端

搭建mix space博客 前端+后端

前言

我是刚刚把博客从typecho转移到mix space的，中间遇到了许许多多的问题，想写这篇文章记录一下，也可以方便自己以后的查阅

感谢烧瑚烙饼在我搭建过程中帮我扫除了层层阻碍

需要准备的东西

  • 一个灵活的脑子
  • 一台linux服务器，服务器内存至少1GB（系统建议使用Ubuntu最新）
  • 在服务器里安装好宝塔面板
  • 两个域名（子域名也可以）+这两个域名的ssl证书

在宝塔面板的软件商店里面下载pm 2.0管理器和Hgihx,还需要安装Node 至少是16以上的版本

Ubuntu 安装依赖环境

sudo apt update && sudo apt install git curl vim wget git-lfs -y

安装依赖环境

依次运行下面两个指令

sudo su

npm install -g pnpm pm2

如果第二个指令下载过慢可以使用这个指令切换镜像源

npm config set registry http://mirrors.cloud.tencent.com/npm/

安装docker

sudo curl -fsSL https://get.docker.com | bash -s docker

国内服务器可以使用这个指令

sudo curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

安装Docker-compose

下载 docker-compose

wget https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

备用

wget https://download.fastgit.org/docker/compose/releases/download/v2.6.0/docker-compose-linux-x86_64

新建文件夹（非必须），可能需要

sudo mkdir -p /usr/local/lib/docker/cli-plugins/

复制到指定位置

sudo cp ./docker-compose-linux-x86_64 /usr/local/lib/docker/cli-plugins/docker-compose

赋予执行权限

sudo chmod +x /usr/local/lib/docker/cli-plugins/docker-compose

检查是否安装完成

docker compose version

正常输出版本号即可。

部署Core

cd

mkdir -p mx-space/server

cd mx-space/server

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/docker-compose.yml

wget https://fastly.jsdelivr.net/gh/mx-space/core@master/.env.example -O .env

运行好后使用宝塔编辑 .env文件 文件实例如下

# SEE https://docs.docker.com/compose/environment-variables/#the-env-file
JWT_SECRET=7294c34e0b28ad282333333  #此处填写一个长度不小于16个字符，不大于32个字符的字符串，示例如：hash 的 md5 值
ALLOWED_ORIGINS=miaoer.xyz,www.miaoer.xyz,v6.www.miaoer.xyz  #此处填写被允许的域名，通常是kami的域名，如果允许多个域名访问，用英文逗号,分隔

拉取镜像

# 拉取最新镜像

sudo docker compose pull

# 启动容器

sudo docker compose up -d

反向代理

进入宝塔后台添加网站，拿刚刚你其中的一个域名来做后台 ，在添加好后直接把ssl也添加好

然后点击反向代理-添加

反向代理
反向代理
想我这样设置好后点击确定，再在那个界面点击配置文件
反向代理后端配置文件
反向代理后端配置文件

将配置文件替换成

#PROXY-START/
location /socket.io {
    proxy_http_version 1.1;
    proxy_buffering off;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_pass http://127.0.0.1:2333/socket.io;
}


location /
{
    proxy_pass http://127.0.0.1:2333/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    add_header X-Cache $upstream_cache_status;
    
    #Set Nginx Cache


    set $static_fileJsNv8TWb 0;
    if ( $uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$" )
    {
        set $static_fileJsNv8TWb 1;
        expires 12h;
        }
    if ( $static_fileJsNv8TWb = 0 )
    {
    add_header Cache-Control no-cache;
    }
}

#PROXY-END/

然后再去宝塔后台开启2333端口

开启端口之后访问你的在你的后端地址加上访问后端地址 /proxy/qaqdmin进行初始化

这个时候你的后端已经部署好了

前端部署

先进入到你服务器的ssh

创建文件夹

输入mkdir shiro

cd到文件夹目录

cd shiro

再依次运行这两个指令

wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env
vim .env # 修改你的 ENV 变量
docker compose up -d
docker compose pull # 后续更新镜

注意如果出现在这个文件夹下找不到.env文件可以尝试运行以下指令, rm -rf ./.env.template.1 mv ./.env.template .env 这个时候再刷新目录就会找到.env文件了。

env文件
env文件

把划横线的删掉

删掉后第一行是Api地址 第二行是Gateway地址

这时候你的前端就运行起来了

在后台配置云函数

进入 Mix Space 后台，进入「配置与云函数」页面，点击右上角的新增按钮，在编辑页面中，填入以下设置：

请注意，这份配置你需要自行修改成符合你的需求的配置。直接使用下面的配置可能会导致你的博客无法按照你的预期运行。

下面的配置可能不全，更多配置项的信息请移步配置项了解。

此外，配置也可写成 YAML 格式，此时数据类型应选择 YAML

  • 名称：shiro
  • 引用：theme
  • 数据类型：JSON
  • 数据：（点击下方的按钮复制）
{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20236136 号",
        "link": "https://icp.gov.moe/?keyword=20236136"
      }
    },
    "linkSections": [
      {
        "name": "关于",
        "links": [
          {
            "name": "关于本站",
            "href": "/about-site"
          },
          {
            "name": "关于我",
            "href": "/about"
          },
          {
            "name": "关于此项目",
            "href": "https://github.com/innei/Shiro",
            "external": true
          }
        ]
      },
      {
        "name": "更多",
        "links": [
          {
            "name": "时间线",
            "href": "/timeline"
          },
          {
            "name": "友链",
            "href": "/friends"
          },
          {
            "name": "监控",
            "href": "https://status.innei.in/status/main",
            "external": true
          }
        ]
      },
      {
        "name": "联系",
        "links": [
          {
            "name": "写留言",
            "href": "/message"
          },
          {
            "name": "发邮件",
            "href": "mailto:i@innei.ren",
            "external": true
          },
          {
            "name": "GitHub",
            "href": "https://github.com/innei",
            "external": true
          }
        ]
      }
    ]
  },
  "config": {
    "color": {
      "light": [
        "#33A6B8",
        "#FF6666",
        "#26A69A",
        "#fb7287",
        "#69a6cc",
        "#F11A7B",
        "#78C1F3",
        "#FF6666",
        "#7ACDF6"
      ],
      "dark": [
        "#F596AA",
        "#A0A7D4",
        "#ff7b7b",
        "#99D8CF",
        "#838BC6",
        "#FFE5AD",
        "#9BE8D8",
        "#A1CCD1",
        "#EAAEBA"
      ]
    },

    "bg": [
      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
    ],
    "custom": {
      "css": [],
      "styles": [],
      "js": [],
      "scripts": []
    },
    "site": {
      "favicon": "/innei.svg",
      "faviconDark": "/innei-dark.svg"
    },
    "hero": {
      "title": {
        "template": [
          {
            "type": "h1",
            "text": "Hi, I'm ",
            "class": "font-light text-4xl"
          },
          {
            "type": "h1",
            "text": "Innei",
            "class": "font-medium mx-2 text-4xl"
          },
          {
            "type": "h1",
            "text": "👋。",
            "class": "font-light text-4xl"
          },
          {
            "type": "br"
          },
          {
            "type": "h1",
            "text": "A NodeJS Full Stack ",
            "class": "font-light text-4xl"
          },
          {
            "type": "code",
            "text": "<Developer />",
            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
          },
          {
            "type": "span",
            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
          }
        ]
      },
      "description": "An independent developer coding with love."
    },
    "module": {
      "activity": {
        "enable": true,
        "endpoint": "/fn/ps/update"
      },
      "donate": {
        "enable": true,
        "link": "https://afdian.net/@Innei",
        "qrcode": [
          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
          "https://cdn.innei.ren/bed/2023/0424213144.png"
        ]
      },
      "bilibili": {
        "liveId": 1434499
      }
    }
  }
}

然后点击右上角的保存

配置前端反代

这里就不再赘述怎么添加网站了和添加反代了，举一反三一下就好了，主要是讲一下前端的配置文件

server{
    location ~* \.(gif|png|jpg|css|js|woff|woff2)$ {
      proxy_pass http://127.0.0.1:2323;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      expires 30d;
    }
    location ~* \/(feed|sitemap|atom.xml) {
      proxy_pass http://127.0.0.1:2333/$1;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
      add_header Cache-Control max-age=60;
    }
    location / {
      proxy_pass http://127.0.0.1:2323;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      add_header X-Cache $upstream_cache_status;
      add_header Cache-Control no-cache;
      proxy_intercept_errors on;
    }
}

把这个复制到配置文件里之后就配置好了

现在你就可以访问你的网页了

使用社交账号登录

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...